<script>
    import { onDestroy } from "svelte"
    import {count, count2, time, elapsed, name, greeting} from "../store/index"
    import Incrementer from "../components/incrementer.svelte"
    import Decrementer from "../components/decrementer.svelte";
    import Reset from "../components/reset.svelte";
    /**
     * 订阅方式1
     * 动态订阅数据变化
     */
    let count_v;
    const unsubscrible = count.subscribe(v => {
        count_v = v
    })
    // 记得销毁订阅防止内存泄漏
    onDestroy(unsubscrible)

</script>

<!-- 订阅的方式1 -->
<h1>the count is  {count_v}</h1>

<!-- 
    订阅的方式2
    自动订阅仅适用于在组件的顶级范围内声明（或导入）的存储变量。
 -->
<h1>the count is  {$count}</h1>

<Incrementer />
<Decrementer />
<Reset />

<h1>可读属性</h1>
<p>{$time}</p>

<h1>计算好的类似getter</h1>
<p>这个页面打开了{$elapsed}秒</p>

<h1>自定义仓库</h1>
<h1>{$count2}</h1>
<button on:click={count2.jia}>+</button>
<button on:click={count2.jian}>-</button>
<button on:click={count2.reset}>reset</button>

<h1>数据绑定</h1>
<p>{$greeting}</p>

<input bind:value={$name}>
<button on:click="{() => $name += '!'}">
	Add exclamation mark!
</button>